const options = [
  {
    value: "STRING",
    label: "STRING"
  },
  {
    value: "TEXT",
    label: "TEXT"
  },
  {
    value: "BOOLEAN",
    label: "BOOLEAN"
  },
  {
    value: "INTEGER",
    label: "INTEGER"
  },
  {
    value: "BIGINT",
    label: "BIGINT"
  },
  {
    value: "FLOAT",
    label: "FLOAT"
  },
  {
    value: "DATE",
    label: "DATE"
  }
];

export function useColumns(model: any) {
  const columns: TableColumnList = [
    {
      label: "字段名",
      prop: "title",
      cellRenderer: ({ row }) => (
        <el-input v-model={row.title} placeholder="例如：性别" />
      )
    },
    {
      label: "属性名",
      prop: "name",
      cellRenderer: ({ row }) => (
        <el-input v-model={row.name} placeholder="例如：sex" />
      )
    },
    {
      label: "属性类型",
      prop: "type",
      cellRenderer: ({ row }) => (
        <el-select v-model={row.type} clearable placeholder="请选择类型">
          {options.map(item => {
            return (
              <el-option
                key={item.value}
                label={item.label}
                value={item.value}
              />
            );
          })}
        </el-select>
      )
    },
    {
      label: "操作",
      fixed: "right",
      width: 90,
      slot: "operation"
    }
  ];

  function onAdd() {
    model.value.push({
      id: model.value.length + 1,
      name: "",
      type: "",
      title: ""
    });
  }

  function onDel(row) {
    const index = model.value.indexOf(row);
    if (index !== -1) model.value.splice(index, 1);
  }

  return {
    columns,
    dataList: model,
    onAdd,
    onDel
  };
}
